<template>
  <div class="container">
    <div class="wheel-header">
      <!-- <div class="back" @click="doIt">返回</div> -->
      <span class="store">积分商城</span>
    </div>
    <div class="integral">我的积分:{{ data }}</div>
    <div class="detail">
      <img class="title" src="../../assets/img/lucky_title.png" alt="" />
      <div class="lucky-wheel">
        <div class="wheel-main">
          <div class="wheel-pointer-box">
            <div
              class="wheel-pointer"
              @click="rotate_handle"
              :style="{
                transform: rotate_angle_pointer,
                transition: rotate_transition_pointer,
              }"
            ></div>
          </div>
          <div
            class="wheel-bg"
            :style="{ transform: rotate_angle, transition: rotate_transition }"
          >
            <div class="prize-list">
              <div
                class="prize-item"
                v-for="(item, index) in prize_list"
                :key="index"
              >
                <div class="prize-pic">
                  <img :src="item.icon" />
                </div>
                <!-- <div class="prize-count" v-if="item.count">
                                    {{item.count}}
                                </div> -->
                <div class="prize-type">
                  {{ item.sname }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 转盘获取的积分
      count: null,
      easejoy_bean: 0, //金豆
      lottery_ticket: 0, //抽奖次数
      data: "",
      toast_control: false, //抽奖结果弹出框控制器
      hasPrize: false, //是否中奖
      start_rotating_degree: 0, //初始旋转角度
      rotate_angle: 0, //将要旋转的角度
      start_rotating_degree_pointer: 0, //指针初始旋转角度
      rotate_angle_pointer: 0, //指针将要旋转的度数
      rotate_transition: "transform 1s ease-in-out", //初始化选中的过度属性控制
      rotate_transition_pointer: "transform 12s ease-in-out", //初始化指针过度属性控制
      click_flag: true, //是否可以旋转抽奖
      prize_list: [],
    }
  },
  //页面挂载完毕从数据库拿到用户积分，渲染到页面
  mounted() {
    //console.log("获取用户积分成功");
    let token = localStorage.getItem("token")
    let url = "/v1/integral/get"
    this.$get(url, token).then(res => {
      //console.log(res);
      this.data = res.data.data[0]
      this.data = this.data.user_integral
    })
  },
  methods: {
    rotate_handle() {
      this.rotating()
      this.i = this.i + 2
    },
    rotating(index) {
      if (!this.click_flag) {
        return
      } else {
        var type = 0 // 默认为 0  转盘转动 1 箭头和转盘都转动(暂且遗留)
        // var during_time = 5; // 默认为1s
        var random = Math.floor(Math.random() * 7)
        var result_index = index || random // 最终要旋转到哪一块，对应prize_list的下标
        var rand_circle = 1 // 旋转的圈数
        this.click_flag = true // 旋转结束前，不允许再次触发
        if (type == 0) {
          // 转动盘子
          var rotate_angle = Math.random() * 360 + rand_circle * 360
          this.start_rotating_degree = rotate_angle
          this.rotate_angle = "rotate(" + rotate_angle + "deg)"
          var that = this
          // 旋转结束后，允许再次触发
          setTimeout(function () {
            that.click_flag = false
            that.game_over()
          }, 1000) // 延时，保证转盘转完
        }
      }
    },
    game_over() {
      let score = 0
      if (
        this.start_rotating_degree % 360 <= 30 ||
        this.start_rotating_degree % 360 > 330
      ) {
        this.count = 1000
      } else if (
        this.start_rotating_degree % 360 > 30 &&
        this.start_rotating_degree % 360 <= 90
      ) {
        this.count = 100
      } else if (this.start_rotating_degree % 360 <= 150) {
        this.count = 50
      } else if (this.start_rotating_degree % 360 <= 210) {
        this.count = 10
      } else if (this.start_rotating_degree % 360 <= 270) {
        this.count = 5
      } else {
        this.count = 0
      }
      // 这里是转盘更新积分  method= 2
      let method = 2
      let url = "/v1/integral/update"
      let token = localStorage.getItem("token")
      let params = { method, token, score: this.count }
      this.$post(url, params).then(res => {
        //console.log(res);
        if (res.data.code == 1) {
          this.$toast(`恭喜您获取${this.count}积分`)
          this.data += this.count
        }
      })
    },
    doIt() {
      //console.log(this.$router);
      this.$router.push("/integral")
    },
  },
}
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;
}
.container .wheel-header {
  position: relative;
  height: 2.5rem;
  background-color: white;
}
.container .integral {
  text-align: center;
  line-height: 6.5rem;
  font-size: 1.5625rem;
  color: brown;
}
.container .wheel-header .store {
  position: absolute;
  left: 50%;
  transform: translateX(-2rem);
  line-height: 2.5rem;
}
.container .wheel-header .back {
  float: left;
  transform: translateX(0.625rem);
  line-height: 2.5rem;
}
.container .title {
  width: 100%;
}
.container .detail {
  padding-top: 3rem;
}
.container div .rule {
  font-size: 0.066667rem;
}
.wheel-main {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.wheel-bg {
  width: 15.9375rem;
  height: 15.9375rem;
  background: url("../../assets/img/turntable.png") no-repeat center top;
  background-size: 100%;
  color: #fff;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  transition: transform 3s ease;
}
.wheel-pointer-box {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 100;
  transform: translate(-50%, -60%);
  width: 5.3125rem;
  height: 5.3125rem;
}
.wheel-pointer {
  width: 4.3125rem;
  height: 5.3125rem;
  background: url("../../assets/img/reward.png") no-repeat center top;
  background-size: 100%;
  margin-left: 0.4rem;
  margin-top: 0.3rem;
  transform-origin: center 60%;
}
.wheel-bg div {
  text-align: center;
}

.tip-content {
  padding: 1.5625rem 0.625rem;
  font-size: 0.875rem;
  color: #fff8c5;
  line-height: 1.5;
}
.toast-btn div {
  background-image: -moz-linear-gradient(
    -18deg,
    rgb(242, 148, 85) 0%,
    rgb(252, 124, 88) 51%,
    rgb(252, 124, 88) 99%
  );
  box-shadow: 0px 4px 0px 0px rgba(174, 34, 5, 0.7);
  width: 4.6875rem;
  height: 1.875rem;
  border-radius: 1.875rem;
  text-align: center;
  line-height: 1.875rem;
  color: #fff;
}
</style>
